<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简书-创作你的创作</title>
    <style>
        nav{
            display: flex;
            justify-content: space-between;

        }
        .collapse{
            margin-left: 200px;
        }
        .nav-item{
            margin-right: 100px ;
        }
        .form-inline{
            margin-right: 400px;
        }
        .logo{
            font-size:25px;
            margin-top: -8px;
        }

        @font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_2091357_dobu41pfg8l.eot?t=1600869748428'); /* IE9 */
  src: url('//at.alicdn.com/t/font_2091357_dobu41pfg8l.eot?t=1600869748428#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpAAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBFIEaATYCJAMICwYABCAFhG0HNRvFBciusCnD9UiRKG0GIV6Dur/Lgc94IR6+3+/3a597UE2qke7JNJE0aScksVIYGqFSCt+baajvci33geULk/EFJAXoDjb3ueMkT67ArsYAjydwrQRV1u0E3fF6+fP1nwDW8FmgoO3zXE5vFFAg8wPluPbmo16AcUCBjjUosg4kzrRhevmCBvI4gWpdKoTmhyamISnT4wJxzAwFkrmoLLNCpVBeszSLB2Uq02V6Bu5D9uOPukiSlBV0y9rRoA4934UpKZZKS3Z9QoyAVpehwASQia3a7IqIYLyI6mxUH9hXY/BdlPbtYq8Wwf46XV8LOqD0nmROfqv1CWSYHwemMDe7ciP6hy9ef2Zev6dfZ7dCb82++5t/ulm+3rlculKiu0jR8x7pzXM+7v58ZAH6Gg/xeLHZ2oO9Iiv9396L3uPeIyJW7vFrgkdXTzV0XJnJ4NNuQYYjSrdZMQ2g8gS+4EfJerZlodCGdEgp8ifj0p2ADdUogQ42+xxrbLsrd6jMyRiSCp0oVBogM3cCZWpMolylKVQbN7y6RgsuInIVxqwDhEbnSOq9oNDohczcD5Rp949yjRFBtZ3IblljKFi6n6MiUSdqmTDNc6l1yHTUOIlG3lZ4VhHyZ5ELliC1VTXFwjC6yOeYIQpGnZSUUO45ZAichrbtEZ97JmqyKiel31ZdTeveVKV5DqTN4ZBCQjpCVUYwGo+L+t2ldOnzk5Ahz6bgLYxcchbiBNY/UatKTQ9yWOv2YtzLK0KBoY4kUQTFeRzEEBiEbDYP4dcPMiGNVCU3Iu1rU2060b7aqvX1ztftgWralMLMLdScM9ew867I5SsBAAA=') format('woff2'),
  url('//at.alicdn.com/t/font_2091357_dobu41pfg8l.woff?t=1600869748428') format('woff'),
  url('//at.alicdn.com/t/font_2091357_dobu41pfg8l.ttf?t=1600869748428') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_2091357_dobu41pfg8l.svg?t=1600869748428#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-pinglunshu-:before {
  content: "\e673";
}
    </style>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../../static/css/index.css">
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link text-danger logo" href="/books/index">简书<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-danger" href="/books/index">首页</a>
      </li>
        <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
      {% if request.session.is_login %}
        <li class="">
        <a class="nav-link" href="" tabindex="-1" aria-disabled="true">当前在线:{{ request.session.user_name }}</a>
      </li>
         <li class="">
             <a href="/books/loginout" class="btn btn-default btn-outline-danger float-right">退出登录</a>
      </li>
        {% else %}
      <li class="">
        <a class="nav-link" href="{% url 'blog:log' %}" tabindex="-1" aria-disabled="true">登录</a>
      </li>
         <li class="">
             <a href="{% url 'blog:reg' %}" class="btn btn-default btn-outline-danger float-right">注册</a>
      </li>
        {% endif %}
    </ul>

  </div>
</nav>
<div class="container index">
<div class="row">
    <div class="col-xs-16 main">
        <div class="split-line"></div>
        <div class="list-container">
            <ul class="note-list">
                {% for d in datas %}
                <li>
                    <div class="content">

                        <a class="title" href="/books/detail/{{ d.id }}">{{ d.title }}</a>
                        <p class="abstract">{{ d.abstract }}</p>
                        <div class="meta">
                            <a class="nickname" target="_blank">{{ d.author }}</a>
                            <a target="_blank">
{#                            <i class="iconfont ic-list-comments" style="content:'/e745'"></i>#}
                                <i class="iconfont icon-pinglunshu-"></i>
                                {{ d.reply_num }}
                            </a>
                            <span><i class="iconfont ic-list-comments">&#10084 &nbsp</i>{{ d.like_num }}</span>

                        </div>

                    </div>
                </li>
                {% endfor %}
            </ul>
            <a href="{{ page_index }}" class="load_more">阅读更多</a>
        </div>

    </div>
<div class="col-xs-7 col-xs-offset-1 aside">

        </div>
</div>
</div>
<footer class="row">
    <img src="../../static/images/footer.png">
</footer>
</body>
</html>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
    $(function () {
        $(".load_more").click(function (e) {
            e.preventDefault()
            var page_index=$(this).attr("href")
            $.ajax({
                url:'/books/index_more?page_index='+page_index,
                success:function (data) {
                    d=$.parseJSON(data)
                    if (d.status=="no")
                        return false
                    $(".load_more").attr("href",d.pageindex)
                    for (var i=0;i<d["data"].length;i++){
                        var title=d.data[i].title
                        var id=d.data[i].id
                        var author=d.data[i].author
                        var abstract=d.data[i].abstract
                        var reply_num=d.data[i].reply_num
                        var read_num=d.data[i].read_num
                        var like_num=d.data[i].like_num
                        var htmlStr="<li><div class=\"content\">"
                        htmlStr+=' <div class="content"><a class="title" href='
                        htmlStr+='"/books/detail/'+id+'">'+title+'</a>'
                        htmlStr+='<p class="abstract">'+abstract+'</p>'
                        htmlStr+=' <div class="meta">\n'
                        htmlStr+='<a class="nickname" target="_blank">'+author+'</a>'
                        htmlStr+='<a target="_blank">'
                        htmlStr+='<i class="iconfont icon-pinglunshu-"></i>'+reply_num
                        htmlStr+='</a><span><i class="iconfont ic-list-comments">&#10084 &nbsp</i>'+like_num+'</span>'
                        htmlStr+='</div>\n' +
                             '           </div>\n' +
                             '         </li>'
                        $(".note-list").append(htmlStr)


                    }
                }
            })
        })
    })
</script>